<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

	<!-- Metas -->
	<title>curtains.js | Documentation | Curtains class</title>
	<meta name="description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
	<link rel="canonical" href="https://www.curtainsjs.com/curtains-class.html">

	<!-- Facebook OG -->
	<meta property="og:title" content="curtains.js | Documentation | Curtains class">
	<meta property="og:type" content="website">
	<meta property="og:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
	<meta property="og:url" content="https://www.curtainsjs.com/curtains-class.html">
	<meta property="og:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

	<!-- Twitter card -->
	<meta name="twitter:card" content="summary_large_image">
	<meta name="twitter:site" content="@martinlaxenaire">
	<meta name="twitter:creator" content="@martinlaxenaire">
	<meta name="twitter:title" content="curtains.js | Documentation | Curtains class">
	<meta name="twitter:description" content="curtains.js is a lightweight vanilla WebGL javascript library that turns HTML DOM elements into interactive textured planes.">
	<meta name="twitter:image" content="https://www.curtainsjs.com/images/curtains-js-logo.jpg">

	<!-- Favicon -->
	<link rel="apple-touch-icon" sizes="180x180" href="images/favicons/apple-touch-icon.png">
	<link rel="icon" type="image/png" sizes="32x32" href="images/favicons/favicon-32x32.png">
	<link rel="icon" type="image/png" sizes="16x16" href="images/favicons/favicon-16x16.png">
	<link rel="manifest" href="images/favicons/site.webmanifest">
	<link rel="mask-icon" href="images/favicons/safari-pinned-tab.svg" color="#202340">
	<link rel="shortcut icon" href="images/favicons/favicon.ico">
	<meta name="msapplication-TileColor" content="#202340">
	<meta name="msapplication-config" content="images/favicons/browserconfig.xml">
	<meta name="theme-color" content="#202340">

	<link href="https://fonts.googleapis.com/css?family=PT+Sans:400,700" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap" rel="stylesheet">
	<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<div id="page-wrap">

	<div id="canvas"></div>

	<div id="content">

		<header id="header">
			<div class="wrapper">
				<div id="header-wrapper" class="flex-wrapper">
					<div id="header-title">
						<a href="/" title="Home">curtains.js</a>
					</div>
					<nav id="main-menu">
						<ul class="flex-wrapper">
							<li>
								<a href="get-started.html">Get started</a>
							</li>
							<li>
								<a href="documentation.html" class="active">Docs</a>
							</li>
							<li>
								<a href="download.html">Download</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</header>

		<section class="content-section api-section">

            <nav id="api-menu-nav">
                <ul id="api-menu">
                    <li class="active">
                        <div class="api-top-menu-item">Core</div>
                        <ul class="api-submenu-content">
                            <li class="active">
                                <a href="curtains-class.html">Curtains</a>
                                <div class="api-class-content">
                                    <div class="api-class-title">
                                        <a href="curtains-class.html#basic-usage">Basic usage</a>
                                    </div>
                                    <div class="api-class-title">
                                        <a href="curtains-class.html#curtains-init-params">Parameters</a>
                                    </div>
                                    <div class="api-class-title">
                                        <a href="curtains-class.html#properties">Properties</a>
                                    </div>
                                    <ul class="api-class">
                                        <li>
                                            <a href="curtains-class.html#alpha">alpha</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#antialias">antialias</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#container">container</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#gl-canvas">canvas</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#depth">depth</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#fail-if-major-performance-caveat">failIfMajorPerformanceCaveat</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#gl">gl</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#pixel-ratio">pixelRatio</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#planes">planes</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#premultiplied-alpha">premultipliedAlpha</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#preserve-drawing-buffer">preserveDrawingBuffer</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#production-mode">production</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#render-targets">renderTargets</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#shader-passes">shaderPasses</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#stencil">stencil</a>
                                        </li>
                                    </ul>
                                    <div class="api-submenu-title">
                                        <a href="curtains-class.html#methods">Methods</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="curtains-class.html#clear">clear</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#clear-color">clearColor</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#clear-depth">clearDepth</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#disable-drawing">disableDrawing</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#dispose">dispose</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#enable-drawing">enableDrawing</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#get-bounding-rect">getBoundingRect</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#get-scroll-deltas">getScrollDeltas</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#get-scroll-values">getScrollValues</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#is-webgl2">isWebGL2</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#lerp">lerp</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#need-render">needRender</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#next-render">nextRender</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#render">render</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#resize">resize</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#restore-context">restoreContext</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#set-container">setContainer</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#set-pixel-ratio">setPixelRatio</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#update-scroll-values">updateScrollValues</a>
                                        </li>
                                    </ul>
                                    <div class="api-submenu-title">
                                        <a href="curtains-class.html#events">Events</a>
                                    </div>
                                    <ul class="api-submenu">
                                        <li>
                                            <a href="curtains-class.html#on-after-resize">onAfterResize</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#on-context-lost">onContextLost</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#on-context-restored">onContextRestored</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#on-error">onError</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#on-render">onRender</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#on-scroll">onScroll</a>
                                        </li>
                                        <li>
                                            <a href="curtains-class.html#on-success">onSuccess</a>
                                        </li>
                                    </ul>
                                </div>

                            </li>
                            <li>
                                <a href="plane-class.html">Plane</a>
                            </li>
                            <li>
                                <a href="texture-class.html">Texture</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Frame Buffer Objects</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="render-target-class.html">RenderTarget</a>
                            </li>
                            <li>
                                <a href="shader-pass-class.html">ShaderPass</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Loaders</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="texture-loader-class.html">TextureLoader</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Math</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="vec-2-class.html">Vec2</a>
                            </li>
                            <li>
                                <a href="vec-3-class.html">Vec3</a>
                            </li>
                            <li>
                                <a href="mat-4-class.html">Mat4</a>
                            </li>
                            <li>
                                <a href="quat-class.html">Quat</a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="api-top-menu-item">Extras</div>
                        <ul class="api-submenu-content">
                            <li>
                                <a href="ping-pong-plane-class.html">PingPongPlane</a>
                            </li>
                            <li>
                                <a href="fxaa-pass-class.html">FXAAPass</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </nav>

			<div id="api-content">

				<div class="api-content-inner">
					<div class="inner-section">
						<h1>Curtains class</h1>

                        <div class="api-item-examples">
                            <a href="https://github.com/martinlaxenaire/curtainsjs/blob/master/src/core/Curtains.js" title="Curtains class source code" target="_blank">Source code</a>
                        </div>

						<h2 id="basic-usage">Basic usage</h2>
						<p>
							You will have to create a Curtains object first that will handle the scene containing all your planes. It will also create the WebGL context, append the canvas and handle the requestAnimationFrame loop. You just have to pass the HTML element (or its ID) that will wrap the canvas :
						</p>

                        <div class="code">

                            <div>
                                <div class="code-comment">
                                    // "canvas" is the ID of our HTML container element
                                </div>
                                <div>
                                    <div>
                                        <span class="code-var">const</span> curtains = <span class="code-var">new</span> <span class="code-tag">Curtains</span>({
                                    </div>
                                    <div class="code-indent">
                                        <span class="code-property">container</span>: document.<span class="code-tag">getElementById</span>(<span class="code-string">"canvas"</span>) <span class="code-comment">// we could have just pass "canvas" instead</span>
                                    </div>
                                    <div>
                                        })<span class="code-var">;</span>
                                    </div>
                                </div>
                            </div>
                        </div>

						<p>
							There are other options that you can pass as parameters. For example, you can specify whether you want to use the library in production mode:
						</p>

                        <div class="code">

                            <div>
                                <div>
                                    <span class="code-var">const</span> curtains = <span class="code-var">new</span> <span class="code-tag">Curtains</span>({
                                </div>
                                <div class="code-indent">
                                    <div>
                                        <span class="code-property">container</span>: <span class="code-string">"canvas"</span><span class="code-var">,</span>
                                    </div>
                                    <div>
                                        <span class="code-property">production</span>: <span class="code-var">true</span> <span class="code-comment">// use the library in "production" mode</span>
                                    </div>
                                </div>
                                <div>
                                    })<span class="code-var">;</span>
                                </div>
                            </div>
                        </div>

                        <h2 id="curtains-init-params">
                            Parameters
                        </h2>

                        <p>
                            Here is a complete list of all the parameters:
                        </p>
                        <ul id="curtains-init-parameters" class="api-item-parameters">
                            <li>
                                <span class="api-item-parameter-label">
                                    container
                                </span>
                                <span class="api-item-parameter-type">
                                    HTML Element or string, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    the HTML Element or ID of the HTML Element that will wrap the canvas. If not specified, the WebGL context will not be set until you call <a href="curtains-class.html#set-container">setContainer()</a> with a valid HTML element or ID.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    alpha
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the WebGL context should handle transparency. Default to true.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    antialias
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the WebGL context should use the default antialiasing. When using render targets, WebGL disables antialiasing, so you can safely set this to false to improve the performance. Default to true.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    premultipliedAlpha
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the WebGL context should handle premultiplied alpha. Default to false.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    depth
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the WebGL context should handle depth. Default to true.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    preserveDrawingBuffer
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the WebGL context should preserve the drawing buffer. Default to false.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    failIfMajorPerformanceCaveat
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the WebGL context creation should fail in case of major performance caveat. Default to true.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    stencil
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the WebGL context should handle stencil. Default to false.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    autoRender
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the library should create a request animation frame loop to render the scene. Set it to false if you want to handle this by yourself using the <a href="curtains-class.html#render">render()</a> method. Default to true.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    autoResize
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the library should listen to the window resize event and actually resize the scene. Set it to false if you want to handle this by yourself using the <a href="curtains-class.html#resize">resize()</a> method. Default to true.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    pixelRatio
                                </span>
                                <span class="api-item-parameter-type">
                                    float, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Defines the pixel ratio value. Use it to limit it on init to increase performance. Default to window.devicePixelRatio.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    renderingScale
                                </span>
                                <span class="api-item-parameter-type">
                                    float, optional (minimum: 0.25, maximum: 1)
                                </span>
                                <span class="api-item-parameter-desc">
                                    Use it to downscale your rendering canvas. May improve performance but will decrease quality. Default to 1.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    watchScroll
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the library should listen to the window scroll event. Set it to false if you want to handle this by yourself. Default to true.
                                </span>
                            </li>

                            <li>
                                <span class="api-item-parameter-label">
                                    production
                                </span>
                                <span class="api-item-parameter-type">
                                    bool, optional
                                </span>
                                <span class="api-item-parameter-desc">
                                    Whether the library should throw useful console warnings or not. Default to false.
                                </span>
                            </li>
                        </ul>

						<h2 id="properties">Properties</h2>
						<ul>
                            <li id="alpha">
                                <p>
                                    <strong>alpha</strong> (bool) <span class="api-item-version">v5.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Whether the WebGL context handles transparency or not.
                                </p>
                            </li>
                            <li id="antialias">
                                <p>
                                    <strong>antialias</strong> (bool) <span class="api-item-version">v6.1</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Whether the WebGL context should use antialiasing.
                                </p>
                            </li>
                            <li id="gl-canvas">
                                <p>
                                    <strong>canvas</strong> (HTML canvas element) <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    The WebGL canvas being created and that contains our scene.
                                </p>
                            </li>
							<li id="container">
								<p>
									<strong>container</strong> (HTML element) <span class="api-item-version">v1.0</span>
								</p>
								<p>
									The container that will hold our WebGL canvas. The canvas will be sized according to this container. For performance reason, the smaller your container the better. Most of the time you'll set it to cover the window.
								</p>
							</li>
                            <li id="depth">
                                <p>
                                    <strong>depth</strong> (bool) <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Whether the WebGL context handles depth or not.
                                </p>
                            </li>
                            <li id="fail-if-major-performance-caveat">
                                <p>
                                    <strong>failIfMajorPerformanceCaveat</strong> (bool) <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Whether the WebGL context creation should fail in case of major performance caveat.
                                </p>
                            </li>
							<li id="gl">
								<p>
									<strong>gl</strong> (WebGL context) <span class="api-item-version">v5.0</span><span class="api-item-warning">read only</span>
								</p>
								<p>
									Our WebGL context.
								</p>
							</li>
							<li id="pixel-ratio">
								<p>
									<strong>pixelRatio</strong> (float) <span class="api-item-version">v1.0</span> <span class="api-item-warning">read only</span>
								</p>
								<p>
									The current device pixel ratio.<br />
                                    Use the <a href="curtains-class.html#set-pixel-ratio">setPixelRatio()</a> method to change this value at runtime.
								</p>
							</li>
							<li id="planes">
								<p>
									<strong>planes</strong> (array) <span class="api-item-version">v1.0</span>
								</p>
								<p>
									An array containing all your current <a href="plane-class.html">Plane</a> elements.
								</p>
							</li>
                            <li id="premultiplied-alpha">
                                <p>
                                    <strong>premultipliedAlpha</strong> (bool) <span class="api-item-version">v5.0</span> <span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Whether the WebGL context handles premultiplied alpha or not.
                                </p>
                            </li>
                            <li id="preserve-drawing-buffer">
                                <p>
                                    <strong>preserveDrawingBuffer</strong> (bool) <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Whether the WebGL context should preserve the drawing buffer.
                                </p>
                            </li>
							<li id="production-mode">
								<p>
									<strong>production</strong> (bool) <span class="api-item-version">v7.0</span>
								</p>
								<p>
									If set to true, will remove all helpful warnings displayed by the library.
								</p>
							</li>
                            <li id="render-targets">
                                <p>
                                    <strong>renderTargets</strong> (array) <span class="api-item-version">v5.0</span>
                                </p>
                                <p>
                                    An array containing all your current <a href="render-target-class.html">RenderTarget</a> elements (including the one used by your shader passes).
                                </p>
                            </li>
                            <li id="shader-passes">
                                <p>
                                    <strong>shaderPasses</strong> (array) <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    An array containing all your current <a href="shader-pass-class.html">ShaderPass</a> elements.
                                </p>
                            </li>
                            <li id="stencil">
                                <p>
                                    <strong>stencil</strong> (bool) <span class="api-item-version">v7.0</span><span class="api-item-warning">read only</span>
                                </p>
                                <p>
                                    Whether the WebGL context should handle stencil.
                                </p>
                            </li>
						</ul>
						<h2 id="methods">Methods</h2>
						<ul>
                            <li id="clear">
                                <p>
                                    <strong>clear</strong>(): <span class="api-item-version">v7.3</span>
                                </p>
                                <p>
                                    Clears both WebGL context colors and depth buffers.
                                </p>
                            </li>
                            <li id="clear-color">
                                <p>
                                    <strong>clearColor</strong>(): <span class="api-item-version">v7.3</span>
                                </p>
                                <p>
                                    Clears WebGL context color buffer.
                                </p>
                            </li>
                            <li id="clear-depth">
                                <p>
                                    <strong>clearDepth</strong>(): <span class="api-item-version">v7.3</span>
                                </p>
                                <p>
                                    Clears WebGL context depth buffer.
                                </p>
                            </li>
							<li id="disable-drawing">
								<p>
									<strong>disableDrawing</strong>(): <span class="api-item-version">v1.8</span>
								</p>
								<p>
									This function will prevent the scene from being drawn again (putting it in a paused state). You won't be able to update uniforms while the drawing is disabled. Useful to improve performance if you got a static scene.
								</p>
								<p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a>, <a href="examples/multiple-textures/index.html" title="Slideshow with a displacement shader" target="_blank">Slideshow with a displacement shader</a> and <a href="examples/asynchronous-textures/index.html" title="Asynchronous textures loading" target="_blank">Asynchronous textures loading</a> examples.
								</p>
							</li>
							<li id="dispose">
								<p>
									<strong>dispose</strong>(): <span class="api-item-version">v1.0</span>
								</p>
								<p>
									This function will cancel the requestAnimationFrame loop, remove all planes and delete the WebGL context.
								</p>
							</li>
							<li id="enable-drawing">
								<p>
									<strong>enableDrawing</strong>(): <span class="api-item-version">v1.8</span>
								</p>
								<p>
									This function will reenable the scene drawing in case you paused it via disableDrawing(). Could be useful if you want to start drawing the scene again when a user gesture happens for example.
								</p>
								<p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-textures/index.html" title="Slideshow with a displacement shader" target="_blank">Slideshow with a displacement shader</a> and <a href="examples/asynchronous-textures/index.html" title="Asynchronous textures loading" target="_blank">Asynchronous textures loading</a> examples.
								</p>
							</li>
                            <li id="get-bounding-rect">
                                <p>
                                    <strong>getBoundingRect</strong>(): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    Useful to get our <a href="#container">container</a> HTML element bounding rectangle without causing a reflow/layout repaint. Be careful as the values are relative to your <a href="#pixel-ratio">pixelRatio</a> value.
                                </p>
                                <p>
                                    <strong>returns:</strong> an object containing the container HTML element width, height, top and left positions.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect" target="_blank">Multiple planes scroll effect</a> and <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a> examples.
                                </p>
                            </li>

                            <li id="get-scroll-deltas">
                                <p>
                                    <strong>getScrollDeltas</strong>(): <span class="api-item-version">v4.0</span>
                                </p>
                                <p>
                                    Get the last scroll delta values along X and Y axis. Call it after having called <a href="curtains-class.html#update-scroll-values">updateScrollValues()</a> or inside the <a href="curtains-class.html#on-scroll">onScroll()</a> event if scroll watching is active.
                                </p>
                                <p>
                                    <strong>returns:</strong> an object containing the last scroll delta values along X and Y axis.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes/index.html" title="Multiple planes" target="_blank">Multiple planes</a>, <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a>, <a href="examples/post-processing-displacement/index.html" title="Post processing displacement effect" target="_blank">Post processing displacement effect</a> and <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a> examples.
                                </p>
                            </li>

                            <li id="get-scroll-values">
                                <p>
                                    <strong>getScrollValues</strong>(): <span class="api-item-version">v4.0</span>
                                </p>
                                <p>
                                    Get the current scroll values along X and Y axis. Call it after having called <a href="curtains-class.html#update-scroll-values">updateScrollValues()</a> or inside the <a href="curtains-class.html#on-scroll">onScroll()</a> event if scroll watching is active.
                                </p>
                                <p>
                                    <strong>returns:</strong> an object containing the current scroll values along X and Y axis.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes/index.html" title="Multiple planes" target="_blank">Multiple planes</a>, <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a>, <a href="examples/post-processing-displacement/index.html" title="Post processing displacement effect" target="_blank">Post processing displacement effect</a> and <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a> examples.
                                </p>
                            </li>

                            <li id="is-webgl2">
                                <p>
                                    <strong>isWebGL2</strong>(): <span class="api-item-version">v7.3</span>
                                </p>
                                <p>
                                    Check whether the created WebGL context is using WebGL2 or not.
                                </p>
                                <p>
                                    <strong>returns:</strong> an boolean indicating if the context is using WebGL2 or not.
                                </p>
                            </li>

                            <li id="lerp">
                                <p>
                                    <strong>lerp</strong>(start, end, amount): <span class="api-item-version">v7.0</span>
                                </p>
                                <p>
                                    Calculates a linear interpolation of the amount specified between the start and end values
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            start
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            value to lerp
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            end
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            end value to use for lerp
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            amount
                                        </span>
                                        <span class="api-item-parameter-type">
                                            float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            amount of lerp
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> the linear interpolation result as a float.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/simple-plane/index.html" title="Simple plane" target="_blank">Simple plane</a>, <a href="examples/multiple-planes/index.html" title="Multiple planes" target="_blank">Multiple planes</a>, <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a>, <a href="examples/simple-video-plane/index.html" title="Simple video plane" target="_blank">Simple video plane</a>, <a href="examples/simple-canvas-plane/index.html" title="Simple canvas plane" target="_blank">Simple canvas plane</a>, <a href="examples/post-processing-displacement/index.html" title="Post processing displacement effect" target="_blank">Post processing displacement effect</a>, <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a>, <a href="examples/post-processing-transform-origin/index.html" title="Post processing scrolling wheel with custom transform origin" target="_blank">Post processing scrolling wheel with custom transform origin</a>, <a href="examples/ping-pong-shading-flowmap/index.html" title="Ping pong shading / FBOs swapping flowmap" target="_blank">Ping pong shading / FBOs swapping flowmap</a>, <a href="examples/render-passes-using-render-targets/index.html" title="Selective shader passes using render targets" target="_blank">Selective shader passes using render targets</a> and <a href="examples/multiple-planes-scroll-effect-custom-scroll/index.html" title="Multiple planes scroll effect with Locomotive Scroll" target="_blank">Multiple planes scroll effect with Locomotive Scroll</a> examples.
                                </p>
                            </li>

							<li id="need-render">
								<p>
									<strong>needRender</strong>(): <span class="api-item-version">v1.8</span>
								</p>
								<p>
									This function will reenable the scene drawing for just one frame. Useful if you want to update uniforms if the drawing is disabled.
								</p>
								<p class="api-item-examples">
									<strong>Examples:</strong> used in <a href="examples/multiple-textures/index.html" title="Slideshow with a displacement shader" target="_blank">Slideshow with a displacement shader</a> and <a href="examples/asynchronous-textures/index.html" title="Asynchronous textures loading" target="_blank">Asynchronous textures loading</a> examples.
								</p>
							</li>

                            <li id="next-render">
                                <p>
                                    <strong>nextRender</strong>(callback, keep): <span class="api-item-version">v7.0</span><span class="api-item-warning">updated in v8.0</span>
                                </p>
                                <p>
                                    A function to execute on the next render call.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                            function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            callback to execute
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            keep
                                        </span>
                                        <span class="api-item-parameter-type">
                                            bool
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            whether to keep executing the callback (act as a setTimeout vs setInterval). Default to false.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> the callback queue item. Useful if you need to switch its keep property from true to false once a condition is met (act as a clearInterval).
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/plane-properties-transforms-cheat-sheet/index.html" title="Plane properties and transformations cheat sheet" target="_blank">Plane properties and transformations cheat sheet</a> and <a href="examples/ajax-navigation-with-plane-removal/index.html" title="AJAX navigation with plane removal" target="_blank">AJAX navigation with plane removal</a> examples.
                                </p>
                            </li>

                            <li id="render">
                                <p>
                                    <strong>render</strong>(): <span class="api-item-version">v4.0</span>
                                </p>
                                <p>
                                    This function renders your scene if drawing is enabled. Useful if you're using your own request animation frame loop.
                                </p>
                            </li>
							<li id="resize">
								<p>
									<strong>resize</strong>():  <span class="api-item-version">v2.0</span> <span class="api-item-warning">triggers reflow</span>
								</p>
								<p>
									This function will resize your scene and all your planes. Called internally at each window resize event. You should call it if you're changing your container size dynamically without changing the window size.
								</p>
							</li>
							<li id="restore-context">
								<p>
									<strong>restoreContext</strong>():  <span class="api-item-version">v2.0</span><br />
								</p>
								<p>
									This function will try to restore the WebGL context. Use it after having previously lost the context.
								</p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in all <a href="index.html#examples" title="Useful examples">examples</a>.
                                </p>
							</li>

                            <li id="set-container">
                                <p>
                                    <strong>setContainer</strong>(container):  <span class="api-item-version">v6.2</span>
                                </p>
                                <p>
                                    Set the Curtains <a href="curtains-class.html#container">container</a> to which we will append the canvas and then start instancing the Curtains class and the WebGL context.<br />
                                    Called internally if a container is specified in the <a href="curtains-class.html#curtains-init-params">initial parameters</a> object but could be called later on if no container is provided in the initial parameters.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            container
                                        </span>
                                        <span class="api-item-parameter-type">
											HTML Element or string
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            HTML element or ID to which append the canvas
                                        </span>
                                    </li>
                                </ul>
                            </li>

							<li id="set-pixel-ratio">
								<p>
									<strong>setPixelRatio</strong>(pixelRatio, triggerCallback):  <span class="api-item-version">v2.0</span> <span class="api-item-warning">triggers reflow</span>
								</p>
								<p>
									This function will set a new pixel ratio and resize everything accordingly.<br />
									The default pixel ratio value being initialized is the actual device pixel ratio. Use this method if you want to limit the pixel ratio to improve performance.
								</p>
								<ul class="api-item-parameters">
									<li>
                                        <span class="api-item-parameter-label">
                                            pixelRatio
                                        </span>
										<span class="api-item-parameter-type">
											float
                                        </span>
										<span class="api-item-parameter-desc">
                                            new pixel ratio to set.
                                        </span>
									</li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            triggerCallback
                                        </span>
                                        <span class="api-item-parameter-type">
											bool, optional
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            whether <a href="#on-after-resize">onAfterResize</a> callback should be triggered, false by default.
                                        </span>
                                    </li>
								</ul>
							</li>

                            <li id="update-scroll-values">
                                <p>
                                    <strong>updateScrollValues</strong>(xOffset, yOffset):  <span class="api-item-version">v4.0</span>
                                </p>
                                <p>
                                    Updates the scroll values. Use it before updating your planes positions with <a href="plane-class.html#update-scroll-position">updateScrollPosition()</a> while scrolling.<br />
                                    Called internally if scroll watching is active.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            xOffset
                                        </span>
                                        <span class="api-item-parameter-type">
											float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            scroll value along X axis.
                                        </span>
                                    </li>
                                    <li>
                                        <span class="api-item-parameter-label">
                                            yOffset
                                        </span>
                                        <span class="api-item-parameter-type">
											float
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            scroll value along Y axis.
                                        </span>
                                    </li>
                                </ul>

                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes-scroll-effect-custom-scroll/index.html" title="Multiple planes scroll effect with Locomotive scroll" target="_blank">Multiple planes scroll effect with Locomotive scroll</a> example.
                                </p>
                            </li>
						</ul>

						<h2 id="events">Events</h2>
						<ul>
                            <li id="on-after-resize">
                                <p>
                                    <strong>onAfterResize</strong>(callback): <span class="api-item-version">v3.0</span>
                                </p>
                                <p>
                                    This function will be called each time the window has been resized, after everything has been updated.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Curtains object, allowing it to be chainable.
                                </p>
                            </li>
							<li id="on-context-lost">
								<p>
									<strong>onContextLost</strong>(callback): <span class="api-item-version">v2.0</span>
								</p>
								<p>
									This function will be called each time the WebGL context has been lost.
								</p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
								<p>
									<strong>returns:</strong> your Curtains object, allowing it to be chainable.
								</p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in all <a href="index.html#examples" title="Useful examples">examples</a>.
                                </p>
							</li>
							<li id="on-context-restored">
								<p>
									<strong>onContextRestored</strong>(callback): <span class="api-item-version">v2.0</span>
								</p>
								<p>
									This function will be called each time the WebGL context has been successfully restored.
								</p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
								<p>
									<strong>returns:</strong> your Curtains object, allowing it to be chainable.
								</p>
							</li>
							<li id="on-error">
								<p>
									<strong>onError</strong>(callback): <span class="api-item-version">v1.7</span>
								</p>
								<p>
									This function will be called if there's an error during the initialisation, or if the WebGL context could not be created.
								</p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
								<p>
									<strong>returns:</strong> your Curtains object, allowing it to be chainable.
								</p>
								<p class="api-item-examples">
									<strong>Examples:</strong> used in all <a href="index.html#examples" title="Useful examples">examples</a>.
								</p>
							</li>
							<li id="on-render">
								<p>
									<strong>onRender</strong>(callback): <span class="api-item-version">v2.0</span>
								</p>
								<p>
									This function is called once at each request animation frame call. Useful if you need to update stats or tweening engine.
								</p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
								<p>
									<strong>returns:</strong> your Curtains object, allowing it to be chainable.
								</p>
								<p class="api-item-examples">
									<strong>Examples:</strong> used in <a href="examples/multiple-planes/index.html" title="Multiple planes" target="_blank">Multiple planes</a>, <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a> examples.
								</p>
							</li>
                            <li id="on-scroll">
                                <p>
                                    <strong>onScroll</strong>(callback): <span class="api-item-version">v4.0</span>
                                </p>
                                <p>
                                    This function is called each time a window scroll event is fired and scroll watching is active.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Curtains object, allowing it to be chainable.
                                </p>
                                <p class="api-item-examples">
                                    <strong>Examples:</strong> used in <a href="examples/multiple-planes/index.html" title="Multiple planes" target="_blank">Multiple planes</a>, <a href="examples/multiple-planes-scroll-effect/index.html" title="Multiple planes scroll effect : rotation, scale and parallax" target="_blank">Multiple planes scroll effect : rotation, scale and parallax</a>, <a href="examples/post-processing-displacement/index.html" title="Post processing displacement effect" target="_blank">Post processing displacement effect</a> and <a href="examples/post-processing-scroll-effect/index.html" title="Post processing multiple passes" target="_blank">Post processing multiple passes</a> examples.
                                </p>
                            </li>
                            <li id="on-success">
                                <p>
                                    <strong>onSuccess</strong>(callback): <span class="api-item-version">v8.1</span>
                                </p>
                                <p>
                                    This function will be called when the WebGL has been successfully created.
                                </p>
                                <ul class="api-item-parameters">
                                    <li>
                                        <span class="api-item-parameter-label">
                                            callback
                                        </span>
                                        <span class="api-item-parameter-type">
                                           function
                                        </span>
                                        <span class="api-item-parameter-desc">
                                            function to execute.
                                        </span>
                                    </li>
                                </ul>
                                <p>
                                    <strong>returns:</strong> your Curtains object, allowing it to be chainable.
                                </p>
                            </li>
						</ul>
					</div>
				</div>

			</div>

		</section>
	</div>
</div>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-141413267-1"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-141413267-1');
</script>

</body>
</html>
